<template>
  <section class="todoapp">
    <!-- 除了驼峰, 还可以使用-转换链接 -->
    <todoHeader :list='list' @huiTer='cheEnter'></todoHeader>
    <todoMain @delMach="delMached" :list="showList"></todoMain>
    <todoFooter @ganjing='clearMsk' @changes="changeOnn" :list="showList"></todoFooter>
  </section>
</template>

<script>
// 1.0 样式引入
import "./styles/base.css"
import "./styles/index.css"
    
import todoHeader from "./components/todoHeader";
import todoMain from "./components/todoMain";
import todoFooter from "./components/todoFooter.vue";


export default {
  components: {
    todoHeader,
    todoMain ,
    todoFooter,
  },
   data() {
    return {
      list:JSON.parse(localStorage.getItem('list') || '[]'),
      isSel:'all'
    };
  },
  methods:{
    //增加
    cheEnter(huiEnter){
     let id= this.list.length ==0  ? 100:this.list[this.list.length - 1].id + 1
      this.list.push({
        id,
        name:huiEnter,
        isDone:'false'
        
      })
     
    },
    //删除
      delMached(id){
         //findIndex 也是循环遍历数组。返回值找到索引元素
        //参数 也是回调函数
        //回调函数的参数 就是 value index
        //方法是箭头函数
        //返回值是false true
        //在遍历的数组中 找到那个被点击的id 
         let index = this.list.findIndex((item) => item.id === id);
      this.list.splice(index, 1);

      },

      //数据切换 在comouter里面完成
      changeOnn(isSel){
        //接收到子组件的传过来的属性
        // //并且定义属性如果issel 是all 显示全部 yse就是 true
            this.isSel= isSel
            // 点击子组件的按钮（已经具备各自显示功能，变量） 而父组件的也声明了this,issel= 这个issel 子组件点击 父组件跟着变化。
      },

      //数据清除就是把这个数组中的false过滤出来 把这个数组传送过去
      clearMsk(){
        this.list= this.list.filter(item=>item.isDone === false)
      }
  },

  computed:{
        showList(){
          // 根据定义函数showList要求拿到对应的数组
          // 并且计算函数computed 一定要返回一个值 return
          // 这个issel的属性是需要变量声明注册
          //最后showlist 要去修改上面的绑定 在使用里面
       
          if(this.isSel === 'no'){
            return this.list.filter(item=>item.isDone===false)
          } else if(this.isSel === 'yes'){
            return this.list.filter(item=>item.isDone ===true)
          }else{
            return this.list
          }
        }
  },
  //数据缓存 事件侦听
  watch:{
    list:{
      deep:true,
      handler() {
          localStorage.setItem("list", JSON.stringify(this.list));
        },  
    }
  }
};
</script>